<template>
	<view class="page">
		<view class="page">
			<navigation class="header_navigation" barColor="#333333" textColor="#333333" defaultButton="back">新闻详情</navigation>
			<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true">
				<view class="detail">
					<text class="detail-title">{{ detail.newsName }}</text>
					<view class="detail-info">
						<view class="info">
							<!-- <marquee width="100%" scrollAmount="3" behavior="alternate">{{ detail.UserName }}({{ detail.OrganizationName }})</marquee> -->
							<text class="time">{{ detail.newsCreateDate | toDate('yyyy-MM-dd') }}</text>
						</view>
						<text class="reading">阅读：{{ detail.newsReadNum || 0 }}</text>
					</view>
					<view class="detail-content"><rich-text class="html-content" :nodes="content"></rich-text></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import * as modelApi from '@/api/userApi/model.js';
import htmlParser from '@/common/html-parser.js';
import {
	HTTP_SERVER_URL 
} from '@/config';
export default {
	data() {
		return {
			HTTP_SERVER_URL,
			detail: {},
			content: ''
		};
	},
	methods: {
		getDetail(id) {
			if (id) {
				modelApi
					.queryNewsDetail({ newsId: id })
					.then(res => {
						if (res.code === 0) {
							this.detail = res.data;
							this.content = htmlParser(res.data.newsText);
							this.appPlusImageHandler(this.content);
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else {
				uni.showToast({
					title: '信息错误',
					icon: 'none',
					duration: 1000
				});
				uni.navigateBack();
			}
		},
		appPlusImageHandler(nodes) {
			if (nodes) {
				nodes.forEach(node => {
					if (node.children) this.appPlusImageHandler(node.children);
				});
			}
		}
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.getDetail(options.id);
		}
	}
};
</script>

<style lang="stylus">
.page_scroll
	position absolute
	top calc(120rpx + var(--status-bar-height))
	right 0rpx
	bottom 0rpx
	left 0rpx
.scroll_panel
	padding 0rpx 30rpx
	box-sizing border-box
.detail
	width 100%
	height 100%
	background-color #FFFFFF
	padding 32rpx 30rpx 30rpx 30rpx
	box-sizing border-box
	.detail-title
		font-size 40rpx
		font-family PingFangSC-Semibold, PingFang SC
		font-weight 700
		color rgba(34, 34, 34, 1)
	.detail-info
		display flex
		align-items center
		justify-content space-between
		margin-top 20rpx
		.info
			display flex
			align-items center
			height 48rpx
		.orgainiation
			font-size 28rpx
			font-family PingFangSC-Regular, PingFang SC
			font-weight 400
			color rgba(119, 135, 150, 1)
			height 100%
			line-height 24px
		.time
			font-size 28rpx
			font-family PingFangSC-Regular, PingFang SC
			font-weight 400
			color rgba(171, 179, 186, 1)
			height 100%
			line-height 48rpx
		.reading
			font-size 28rpx
			font-family PingFangSC-Regular, PingFang SC
			font-weight 400
			color rgba(171, 179, 186, 1)
	.detail-content
		margin-top 20rpx
		font-size 32rpx
		font-family PingFangSC-Regular, PingFang SC
		font-weight 400
		color rgba(21, 27, 33, 1)
		text-align justify
		margin-bottom 20rpx
</style>
